<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>瀑布流布局js</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
      }

      #waterfall {
        position: relative;
        margin: 20px auto;
        width: 95%; /* 设定瀑布流容器的宽度 */
        max-width: 1200px; /* 最大宽度  */
      }

      .item {
        width: 33%; /* 每个item的宽度 */
        background-color: #fff;
        margin-bottom: 20px; /* 项目底部间距 */
        border: 1px solid #ccc;
        padding: 10px;
        box-sizing: border-box;
        transition: transform 0.3s ease; /* 平滑的过渡效果 */
      }

      .item img {
        width: 100%;
        height: auto;
      }

      .item:hover {
        transform: scale(1.05); /* 悬浮时放大 */
      }
    </style>
  </head>
  <body>
    <div style="text-align: center">
      具体思路：使用js得到上一行的高度，然后根据上一行的高度和当前行的高度，计算当前行的位置，然后设置当前行的位置。
    </div>
    <div id="waterfall">
      <div class="item">
        <img src="https://via.placeholder.com/300x200" alt="图片1" />
        <p>内容1: 这是一张图片和文本组合的瀑布流元素。</p>
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/300x150" alt="图片2" />
        <p>内容2: 瀑布流布局使得内容按照宽度等分排列。</p>
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/300x300" alt="图片3" />
        <p>内容3: 瀑布流布局适合不规则的内容展示。</p>
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/300x180" alt="图片4" />
        <p>内容4: 响应式布局根据屏幕宽度自动调整。</p>
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/300x250" alt="图片5" />
        <p>内容5: 每个元素的高度不同，效果自然。</p>
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/300x220" alt="图片6" />
        <p>内容6: 适用于图片集或不规则内容的展示。</p>
      </div>
    </div>

    <script>
      window.onload = function () {
        const container = document.getElementById('waterfall')
        const items = Array.from(container.getElementsByClassName('item'))

        function createWaterfallLayout() {
          // 计算每列的宽度（根据容器的宽度和列数）
          const containerWidth = container.clientWidth
          const columnCount = Math.floor(containerWidth / items[0].offsetWidth)
          const columnHeights = new Array(columnCount).fill(0) // 存储每列的高度,先默认为0

          // 循环每个item，计算其位置
          items.forEach(item => {
            // 找到最短的列
            const minColumnHeight = Math.min(...columnHeights)
            const columnIndex = columnHeights.indexOf(minColumnHeight)

            // 设置item的top和left位置
            item.style.position = 'absolute'
            item.style.top = `${minColumnHeight}px`
            item.style.left = `${columnIndex * (item.offsetWidth + 20)}px` // 20是gap的宽度

            // 更新该列的高度
            columnHeights[columnIndex] += item.offsetHeight + 20
          })

          // 设置容器的高度为所有列的最大高度
          container.style.height = `${Math.max(...columnHeights)}px`
        }

        // 调用函数初始化布局
        createWaterfallLayout()

        // 窗口调整大小时重新计算布局
        window.onresize = createWaterfallLayout
      }
    </script>
  </body>
</html>
